<template>
  <a-card>
    <a-form @submit.prevent="onSubmit" :form="form">
      <a-form-item v-bind="formItemLayout" label="手机号">
        <a-input
          v-decorator="['phone',{rules: [{ required: true, message: '请输入' }]}]"
          size="large"
          placeholder="请输入账号"
        ></a-input>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="颜色">
        <color-picker
          v-decorator="['color',{rules: [{ required: true, message: '请输入' }], initialValue: ''}]"
        ></color-picker>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="图片">
        <hotel-upload
          v-decorator="['photo', {initialValue: [],rules: [{required: true, message: '上传图片'}]}]"
        ></hotel-upload>
      </a-form-item>
      <a-form-item v-bind="tailFormItemLayout">
        <a-button size="large" htmlType="submit" type="primary">提交</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
export default {
  data() {
    return {
      form: this.$form.createForm(this)
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.form.setFieldsValue({
        phone: '13621879784',
        photo: [{ url: 'https://pano-img.halobear.com/hotel/lo2JzOhHIzIzzYLZvo_ooRUsVHur.jpg!500x500' }]
      })
    },
    onSubmit() {
      this.form.validateFields((err, values) => {
        if (err) return
        console.log(values)
      })
    }
  }
}
</script>

<style>
</style>
